<template>
  <div>
    <div v-if="$route.params.id3==0?false:true" class="video2-hed">
      <div class="v2-left">
        <img @click="bac3()" :src="'./static/lyl/back2.png'" alt="">
        <span>视频播放</span>
      </div>
      <img @click="isbare2" :src="'./static/lyl/san2.png'" alt="">
    </div>
    <video v-if="$route.params.id3==0?false:true" :src="smeta" controls width="100%" :poster="thumb"></video>
    <div v-if="$route.params.id3==0?false:true" class="v2-cont">
      <p>{{video_title}}</p>
      <p>{{video_description}}</p>
      <p>
        <img :src="'./static/lyl/time.png'" alt="">
        <span>{{create_time}}</span>
        <img :src="'./static/lyl/loke.png'" alt="">
        <span>{{play}}</span>
      </p>
    </div>

    <div class="v-p1">
      <h2>共{{count}}票</h2>
      <ul>
        <li v-for="(item,index) in autkorData" :key="index">
          <img :src="item.avatar" alt="">
          <p>{{item.user_login}}</p>
        </li>
      </ul>
    </div>



    <van-popup v-model="bolls" position="bottom">
      <div class="fotsss" v-for="(item,index) in imgData" :key="index">
        <img :src="item" alt="">
        <p>分享到微信</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import * as list from "../../../api/list.js";
  export default {
    name: "Votecount3",
    data(){
      return {
        bolls:false,
        imgData:['./static/lyl/timg.jpg','./static/lyl/timg.jpg','./static/lyl/timg.jpg','./static/lyl/timg.jpg'],
        smeta:'',
        thumb:'',
        video_title:'',
        video_description:'',
        create_time:'',
        play:'',
        count:'',
        autkorData:[]
      }
    },
    beforeMount(){
      let parmes3 = {
        id:this.$route.params.id3,
        user_id:this.$store.state.user_id
      };
      list.playVideo(parmes3).then(res=>{
        //console.log(res);
        this.smeta = res.smeta;
        this.thumb = res.thumb;
        this.video_title = res.video_title;
        this.video_description = res.video_description;
        this.create_time = res.create_time;
        this.play = res.play;
      });

      let parms = {
        active_id:this.$route.params.id,
        user_vote_id:this.$route.params.id2
      };
      list.userVoteDetail(parms).then(res=>{
        console.log(res);
        this.count = res.count;
        this.autkorData = res.data;
      })
    },
    mounted(){
      mui.back = function() {
        window.history.go(-1);
      }
    },
    methods:{
      bac3(){
        history.go(-1)
      },
      isbare2(){
        this.bolls = !this.bolls;
      }
    }
  }
</script>

<style scoped>
  .video2-hed{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
  }
  .video2-hed .v2-left img{
    width: 22px;
    height: 40px;
    margin-right: 40px;
  }
  .video2-hed .v2-left span{
    font-size: 30px;
    color: #fff;
    vertical-align: top;
  }
  .video2-hed>img{
    width: 56px;
    align-self: center;
  }
  .v2-cont{
    padding: 20px 40px;
    border-bottom: 1px solid #dcdcdc;
  }
  .v2-cont p{
    padding-bottom: 10px;
  }
  .v2-cont p:nth-child(1){
    font-size: 32px;
    font-weight: bold;
  }
  .v2-cont p:nth-child(2){
    font-size: 24px;
    color: #8c8c8c;
  }
  .v2-cont p:nth-child(3) img{
    width: 30px;
    vertical-align: bottom;
  }
  .v2-cont p:nth-child(3) img:nth-child(3){
    width: 36px;
    vertical-align: bottom;
  }
  .v2-cont p:nth-child(3) span{
    font-size: 24px;
    color: #8c8c8c;
    margin: 0 20px;
  }

  .v-p1{
    padding: 20px 40px;
  }
  .v-p1 h2{
    font-size: 32px;
    font-weight: bolder;
    padding: 40px 0;
  }
  .v-p1 ul{
    display: flex;
    flex-wrap: wrap;
  }
  .v-p1 ul li{
    margin:0 40px 50px 0;
    text-align: center;
  }
  .v-p1 ul li:nth-child(5n+5){
    margin-right: 0;
  }
  .v-p1 ul li img{
    width: 100px;
    height: 100px;
    border-radius: 100%;
  }
  .v-p1 ul li p{
    font-size: 32px;
    padding-top: 20px;
  }

  .van-popup{
    width: 100%;
    height: 200px;
    padding: 50px 0;
    display: flex;
    justify-content: space-around;
  }
  .van-popup img{
    width: 100px;
    height: 100px;
  }
  .fotsss{
    text-align: center;
  }
  .fotsss p{
    font-size: 26px;
    padding-top: 10px;
  }
</style>
